<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<c:url value="/js/json2.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/json_parse.js" />"></script>
<title></title>
</head>
<body>
	<form name="form1" method="post" action="<c:url value="/security/register.action" />">
		Email: <input type="text" name="user.email" /><br />
		Password: <input type="password" name="user.password" /><br />
		Username: <input type="text" name="user.username" /><br />
		Phone: <input type="text" name="user.phone" /><br />
		<br />
		更改struts.xml來使用下面兩個其中一個按鈕，當使用的是json設定時，可以按submit下載json格式檔案看內容<br />
		<input type="button" value="json" onclick="showRegister();" />
		<input type="submit" value="submit" /><br />
	</form>
	<div id="show" style="position:absolute; left:25%; top:25%; width:50%; height: 50%; display: none;"></div>
	<script type="text/javascript">
	//為了方便，使用傳統做法
		var requestobj = null;
		
		function showRegister() {
			sendGetRequest(form1.action);
		}

		function sendGetRequest(actionName) {
			requestObj = getXMLHttpRequest();
			requestObj.onreadystatechange = callBack;
			requestObj.open("POST", actionName);
			requestObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			var form_elem;
			var param = "";
			for (i = 0; i < form1.length; i++) {
				form_elem = form1.elements[i];
				param += form_elem.name + "=" + form_elem.value;
				if (i != form1.length - 1) {
					param += "&";
				}
			}
			//param = "user.email=" + form1.email.value + "&user.password=" + form1.password.value + "&user.username=" + form1.username.value + "&user.phone=" + form1.username.value;
			requestObj.send(param);
		}

		function callBack() {
			if (requestObj.readyState == 4) {
				if (requestObj.status == 200) {
					var jsonResult = eval("(" + requestObj.responseText + ")");
					var error = jsonResult["errorMessage"];
					var errorMessage = "";
					for(var key in error){
						errorMessage += error[key] + "<br/>";
					}
					if (errorMessage) {
						document.getElementById("show").innerHTML = "<label>error: " + errorMessage + "</label>";
						document.getElementById("show").style.display = "";
						return;
					}
					var mail = jsonResult["user"]["email"];
					var password = jsonResult["user"]["password"];
					var username = jsonResult["user"]["username"];
					var phone = jsonResult["user"]["phone"];
					document.getElementById("show").innerHTML = "<label>email: " + mail + "<br/>password: " + password + "<br/>username: " + username + "<br/>phone: " + phone + "</label>";
					document.getElementById("show").style.display = "";
				}
			}
		}

		function getXMLHttpRequest() {
			if (window.XMLHttpRequest) {
				return new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				try {
					return new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					try {
						return new ActiveXObject("Microsoft.XMLHTTP");
					} catch (ex) {
						alert("Fail to Get XMLHttpRequest");
						return null;
					}					
				}
			} else {
				alert("Fail to Get XMLHttpRequest");
				return null;
			}
		}
	</script>
</body>
</html>